<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>

    <div id="app">

        <router-link to="/user/abc?name=sunxiaoshuang&age=22">222</router-link>
        <router-link to="/user/243254?code=sunxsh">243254</router-link>
        <router-link to="/user/rt43tg3">rt43tg3</router-link>
        <router-link to="/user/g54y54">g54y54</router-link>

        <router-view />
    </div>

    <script>
        var User = {
            template: `
                <div>我是用户：{{ $route.params.id }} - {{ $route.query }} - {{ $route.hash }}
                    <router-view />
                </div>
            `
        }
        var UserDetail = {
            template: `
                <h1>我是详情</h1>
            `
        }
        var routes = [
            { path: "/user", component: User,   
                children: [
                    { path: '/detail', component: UserDetail }
                ]
            },
        ]
        var router = new VueRouter({
            routes,
        })
        new Vue({
            router  
        }).$mount("#app")
    </script>
</body>
</html>